<template>
	<view class="content">
		<nav-bar background="#FFFFFF" @init="navInit">
			<template slot="title">
				<view class="head-title">
					<image src="/static/logo.png" mode="widthFix"></image>
				</view>
			</template>
		</nav-bar>

		<view class="head" :style="{top: stickyTop}">
			<!-- 搜索 -->
			<view class="search">
				<view class="input">
					<input type="text" v-model="params.key" placeholder="搜索租赁产品"
						placeholder-class="placeholder-class" />
				</view>
				<view class="icon-btn">
					<text class="iconfont icon-search"></text>
				</view>
			</view>

			<!-- 选项卡 -->
			<view class="tabs-wrap">
				<com-tabs :tabs="tabs" :active="params.p_gid" @change="changeTab"></com-tabs>
			</view>
		</view>

		<view class="lists">
			<block v-for="(item, index) in lists">
				<view class="list-item-wrap">
					<view v-if="item.config_data.type === 'product'" :key="item.gid" class="list-item"
						@click="goProductDetails(item)">
						<view class="item-img down-up" :style="{'--item-index': `${(index * 200) + 200}ms`}">
							<image :src="item.icon ? item.icon : item.config_data.data.thumb" mode="widthFix"></image>
						</view>
						<view class="title-explain">
							<view class="series">{{item.config_data.data.classify_title}}</view>
							<view class="title">{{item.config_data.data.title}}</view>
							<view class="explain text-overflow-hidden-2" style="width: 40%;">{{ item.desc }}</view>
						</view>
						<view class="item-btn">
							<view class="flex price-wrap">
								<view v-if="item.config_data.data.day_rent" class="price">
									<text class="price-symbol">¥</text>
									<text
										class="price-num">{{item.config_data.data.day_rent | formatPrice($formatPrice, '')}}
									</text>
									<text class="price-unit">/天</text>
								</view>
							</view>
							<!-- 三角形 -->
							<view class="triangle"></view>
							<view class="lightning">
								<image src="@/static/lightning.png" mode="widthFix"></image>
							</view>
							<view class="right-text">租它</view>
						</view>
					</view>
				</view>
			</block>
		</view>

		<view v-if="!loading && lists.length === 0" class="empty">暂无数据</view>
	</view>
</template>

<script>
	import formatPrice from '@/mixins/formatPrice.js';

	export default {
		mixins: [formatPrice],
		data() {
			return {
				title: '贝贝无人机',
				params: {
					page: 1, // 当前页
					limit: 10, // 每页显示条数
					key: '', // 关键字
					p_gid: '', // 父级ID，传0值显示顶级数据
					belong_module: '', // 
				},
				tabs: [], // 选项卡
				activeTab: 1,
				stickyTop: '',

				lists: [], // 列表数据
				more: true, // 是否有更多数据
				loading: false, // 加载中
			}
		},
		onShow() {
			this.classifyList()
		},
		onShareAppMessage() {},
		onShareTimeline() {},
		methods: {
			// 前往产品详情
			goProductDetails(item) {
				uni.navigateTo({
					url: `/pages/product/detail/detail?gid=${item.config_data.gid}`
				})
			},
			// 获取分类
			classifyList() {
				const params = {
					page: 1, // 当前页
					limit: 9999, // 每页显示条数
					key: '', // 关键字
					pid: '', // 父级ID，传0值显示顶级数据
					belong_module: 'applet_classify', // 
				}
				this.$api.classifyListApi(params).then(res => {
					this.tabs = res.data.map(item => ({
						...item,
						label: item.title,
						value: item.gid
					}))
					this.params.p_gid = this.tabs[0].value
					this.getList()
				}).catch(err => {
					console.log('err', err);
				})
			},
			// 获取列表
			getList() {
				this.loading = true
				this.$api.classifyListApi(this.params, {
					loading: true
				}).then(res => {
					if (this.params.page === 1) {
						this.lists = []
					}
					if (res.data.length === 0 || res.data.length < this.params.limit) {
						this.more = false
					} else {
						this.more = true
					}

					const oldList = [...this.lists]

					this.lists = oldList.concat(res.data.map(item => ({
						...item,
						config_data: item.config_data ? JSON.parse(item.config_data) : {}
					})))

					console.log('lists', this.lists);
				}).catch(err => {
					console.log('err', err);
				}).finally(() => {
					this.loading = false
				})
			},
			// 切换选项卡
			changeTab(value) {
				this.params.p_gid = value
				this.params.page = 1
				this.getList()
			},
			navInit(val) {
				this.stickyTop = val
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.content {
		padding: 0 52rpx;
		padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.head-title {
		position: relative;
		font-family: Alimama ShuHeiTi;
		font-size: 18px;
		font-weight: 700;
		line-height: 21.6px;
		text-align: left;
		color: #000000;

		image {
			width: 132rpx;
			height: 32rpx;
			// position: absolute;
			// top: 0;
			// right: 0;
			// width: 50rpx;
			// transform: translateX(90%) translateY(-50%);
		}
	}

	.head {
		position: sticky;
		// top: 176rpx;
		z-index: 999;
		background-color: #FFFFFF;

		&::after {
			position: absolute;
			content: '';
			z-index: -1;
			top: -2rpx;
			left: -2rpx;
			right: -2rpx;
			bottom: -2rpx;
			background-color: #FFFFFF;
		}

	}

	.search {
		display: flex;
		align-items: center;
		justify-content: space-between;

		width: 100%;
		height: 100rpx;
		padding-top: 18rpx;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);


		.input {
			flex: 1;
			padding-left: 4rpx;
		}

		.icon-btn {
			padding: 0 32rpx;
		}
	}

	.tabs-wrap {
		padding-top: 32rpx;
		padding-bottom: 52rpx;
	}

	.down-up {
		animation: rotate1 1.5s linear infinite;
		animation-delay: var(--item-index); /* 设置2秒的延迟 */
	}

	/* 定义升降动画 */
	@keyframes rotate1 {
		0% {
			top: -4rpx;
		}

		50% {
			top: 4rpx;
		}
		
		100% {
			top: -4rpx;
		}
	}

	.lists {
		gap: 52rpx;
		display: flex;
		flex-direction: column;
		padding-top: 4rpx;

		.list-item-wrap {
			position: relative;
			width: 100%;
			min-height: 370rpx;
			border-radius: 26rpx;
			background-color: #FAFAFA;


			&::after {
				position: absolute;
				content: '';
				top: -2rpx;
				left: -2rpx;
				right: -2rpx;
				bottom: -2rpx;
				z-index: -1;
				border-radius: 28rpx;
				background: linear-gradient(71.47deg, #E4E4E4 -7.85%, #F5F5F5 66.03%);
			}
		}

		.list-item {
			position: relative;
			width: 100%;

			overflow: hidden;
			min-height: 370rpx;
			border-radius: 26rpx;
			background-color: #FFFFFF;

			.item-img {
				position: absolute;
				top: 0;
				right: 0;
				width: 100%;
				transform: translateX(30%) translateY(-30%);

				image {
					width: 100%;
				}
			}

			.title-explain {
				position: absolute;
				left: 30rpx;
				bottom: 40rpx;
				width: 100%;
			}

			.series {
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				text-align: left;

			}

			.title {
				font-size: 36rpx;
				font-weight: 600;
				line-height: 50rpx;
				text-align: left;

			}

			.explain {
				font-size: 20rpx;
				font-weight: 400;
				line-height: 28rpx;
				text-align: left;
				padding-top: 22rpx;

			}

			.item-btn {
				position: absolute;
				right: 30rpx;
				bottom: 40rpx;
				overflow: hidden;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
			}

			.price-wrap {
				position: relative;
				height: 66rpx;
				
				z-index: 9;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				background-color: #000000;
				
				&::after {
					position: absolute;
					content: '';
					top: 0;
					left: 0;
					z-index: -1;
					width: 100%;
					height: 100%;
					transform: skewX(-16deg);
					background-color: #000000;
				}
			}

			.price {
				display: flex;
				align-items: flex-end;
				padding: 10rpx 28rpx;
				box-sizing: border-box;
			}

			.price-symbol {
				font-size: 24rpx;
				font-weight: 600;
				line-height: 32rpx;
				text-align: left;
				color: #FFFFFF;
				padding-right: 2rpx;
			}

			.price-num {
				font-size: 36rpx;
				font-weight: 700;
				line-height: 42rpx;
				text-align: left;
				color: #FFFFFF;
			}

			.price-unit {
				font-size: 14rpx;
				font-weight: 600;
				line-height: 32rpx;
				text-align: left;
				padding-left: 4rpx;
				color: #FFFFFF;
			}
			
			.triangle {
				position: absolute;
				top: 0;
				right: 102rpx;
				width: 0;
				height: 0;
				z-index: 11;
				border-top: 96rpx solid #000000;
				border-bottom: 10rpx solid transparent;
				border-right: 28rpx solid transparent;
			}
			
			.lightning {
				position: absolute;
				right: 74rpx;
				top: 0;
				width: 82rpx;
				z-index: 99;
				
				image {
					width: 100%;
				}
			}
			
		
			.right-text {
				font-family: Alibaba PuHuiTi 2.0;
				font-size: 30rpx;
				font-weight: 700;
				text-align: left;
				color: #FFFFFF;
				
				position: relative;
				z-index: 10;
				height: 66rpx;
				display: flex;
				padding-right: 24rpx;
				padding-left: 32rpx;
				align-items: center;
				justify-content: center;
				background: var(--gradient-color-horizontal);
				background-color: #000000;
				
				&::after {
					position: absolute;
					content: '';
					top: 0;
					left: 0;
					z-index: -1;
					width: 100%;
					height: 100%;
					transform: skewX(-16deg);
					background: var(--gradient-color-horizontal);
				}
			}
		}
	}
</style>